import React, { Component } from 'react'
 class Yinyue extends Component {
    componentDidMount(){
         console.log(this.jindutiao);
         this.jindutiao.value = 0
         this.jindutiao.min = 0
         this.myRef.onloadedmetadata =  ()=> { // 监听歌曲加载完成事件
             console.dir(this.myRef.duration);
             this.jindutiao.max = this.myRef.duration
            // 在加载完成后才可以获取到总时长
            // var time = changeTime(audio.duration)
            // endTime.innerHTML = time
            // jindutiao.max = audio.duration
        }
        this.myRef.ontimeupdate =  ()=> { // 监听歌曲播放时间得变化
            // 获取最新时间，赋值给开始时间的标签，赋值给进度条
           
            this.jindutiao.value = this.myRef.currentTime
        }
        this.jindutiao.oninput=()=>{  // 拖动进度条事件
             this.myRef.currentTime = this.jindutiao.value
        }
    }
    bofang(){
        
        this.myRef.play()
    }
    zanting(){
        this.myRef.pause()
    }
  render() {
    return (
      <div>
          <button onClick={this.bofang.bind(this)}>播放</button>
          <button  onClick={this.zanting.bind(this)}>暂停</button>
          <input className="jindutiao" type="range" ref={ref=>this.jindutiao=ref} />
          <audio ref={ref=>this.myRef=ref} src="https://m801.music.126.net/20220402085739/58acdd63d01f2dbba0cdf85082704960/jdyyaac/010c/530f/0f5e/6f5ad8416fdeba9f078d84c18ce3208e.m4a" controls="controls" preload="true"></audio>
      </div>
    )
  }
}
export default Yinyue